<template>
  <div>
    <h1>当前所求的和为：{{sum }}</h1>
    <h1>当前求和放大10倍：{{bigSum}}</h1>
    <h1>我的家乡是：{{city}},我的学校是：{{school}}</h1>
    <h1>总人数：{{personList.length}}</h1>
    <select name="" id="" v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="jia(num)">+</button>
    <button @click="jian(num)">-</button>
    <button @click="odd(num)">当前求和为奇数时再加</button>
    <button @click="wait(num)">等一等再加</button>
  </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  data() {
    return {
      num: 1,
      // sum: 0,
    };
  },
  computed:{
    //借助mapState生成计算属性(state)，{he:"sum",chengshi:"city",xuexiao:"school"}(对象写法),当定义的名字不一致时
     //...mapState({he:"sum",chengshi:"city",xuexiao:"school"})
    //借助mapState生成计算属性(state)，["sum","city","school"](数组写法)，当定义的名字一致时
    ...mapState("countAbout",["sum","city","school"]),
    //借助mapState生成计算属性(getters)，["bigSum"](数组写法)，当定义的名字一致时
    ...mapGetters("countAbout",["bigSum"]),
    personList(){
      return this.$store.state.studentAbout.personList
    }
    //借助mapState生成计算属性(getters)，{dahe:"bigSum"}(对象写法),当定义的名字不一致时
     //...mapState({he:"sum",chengshi:"city",xuexiao:"school"})
  },
  methods: {
    // add() {
    //   //   this.sum += this.num;
    //   this.$store.commit("jia", this.num);
    // },
    // descread() {
    //   //   this.sum -= this.num;
    //   this.$store.commit("jian", this.num);
    // },
    ...mapMutations("countAbout",["jia","jian"]),
    // odd() {
    //     this.$store.dispatch("odd", this.num);
    // },
    // white() {
    //     this.$store.dispatch("wait", this.num);
    // },
    ...mapActions("countAbout",["odd","wait"])
  },
};
</script>
<style scoped>
button {
  margin-left: 10px;
}
</style>